<template>
    <h2>setup与OptionsAPI关系</h2>
    <!--setup可以和老的写法选项式混搭，data中可以读取setup中变量数据，但是setup中不可以可以读取原来data中的数据变量-->
    <div class="person">
      <h2>name:{{ name }}</h2>
      <h2>age:{{ age }}</h2>
      <button @click="showTel" >联系方式</button>
      <button @click="changeAge" >改年龄</button>
      <h2>a: {{ a }}</h2>
      <h2>c: {{ c }}</h2>
    </div>
    <input type="text" v-model="money" />
    <input type="text" v-bind:value="money" />
  </template>
  
  <script lang='ts'>
  export default{
      name:'person3',
      //创建之前
      beforeCreate(){
        console.log("---beforeCreate---")
      },
      //data和methods可以和setup共存
      data(){
        return{
            a:100,
            money : '1234.67',
            c:this.name //可以读到setup中的变量，但是setup中无法读取到data中变量
        }
      },
      methods:{
        b(){
            console.log("---b---")
        }
      },
      
      //组合式
      setup(){
        //数据，原来是写在data中的，
        let name="zhangsan" //注意，此时的name不是响应式的
        let age = 19 //注意，此时的age不是响应式的
        let tel = '13900000002'
        //注意、注意、这里不能读取上面data中变量

        //方法
        function showTel(){
            alert(tel)
        }
        function changeAge(){
            console.log("---changeAge---")
            //因为不是响应式，所以，虽然这里age变了，但是页面上不会变化
            age+=1
        }

        //需要返回，才可以引用
        //第一种返回对象，key：value,然后上面用key
        //return {a:name,b:age}

        //第二种，简写,当key和value变量一样，直接忽略key
        return {name,age, changeAge, showTel}

        //第三种，也可以返回一个函数，一般很少用
        //return ()=>'return value'

        //如果每次，所有数据、函数都这么写，是一件非常麻烦的事情，实际项目中，肯定不是这样玩，看lesson5
      }
      
  }
  </script>
  <style scoped>
  .person{
      background-color: skyblue;
      border-radius: 3px;
      padding: 5px;
      margin: 2px 5px 2px 5px;
  }
  </style>